<script setup>
// import { ref } from "vue";
import { reactive, ref } from "vue";
// 路由跳转
import { useRouter } from 'vue-router'
const router = useRouter();
// 用户名密码数据绑定
const formLoginInfo = reactive({
    nameORemail: "",
    passwd: "",
});

const size = ref(170)

const submitLogin = () => {
    // console.log(formLoginInfo.nameORemail, formLoginInfo.passwd)
    fetch("http://localhost/test-7/pixiv-login.php", {
        method: "POST", // or 'PUT'
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            name: formLoginInfo.nameORemail,
            passwd: formLoginInfo.passwd,
        }),
    })
        .then((response) => response.json())
        .then((data) => {
            if (data.status == 1) {
                // 路由跳转
                router.push("/User/"+data["UID"]);
            }else{
                alert("登陆失败")
            }
        })
        .catch((error) => {
            console.error("Error:", error);
        });
}
</script>

<template>
    <header id="login-bg">
        <el-main>
            <el-row class="row-bg login-w-m" align>
                <el-col>
                    <div id="login-header">
                        <ul>
                            <li><a>CNPixiv</a></li>
                            <li>让你的创作被每个人看到</li>
                            <li>
                                <h2>登录平台</h2>
                            </li>
                        </ul>
                    </div>
                </el-col>
                <el-col>
                    <div id="login-main">
                        <el-form :model="formLoginInfo">
                            <el-form-item>
                                <el-input v-model="formLoginInfo.nameORemail" placeholder="用户名或邮箱" type="text" />
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="formLoginInfo.passwd" placeholder="密码" type="password" />
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col>
                    <div id="login-footer-in">
                        <el-space warp :size="size">
                            <el-button type="primary" @click="submitLogin()">登录</el-button>
                            <router-link to="/registered">
                                <el-button>注册</el-button>
                            </router-link>
                        </el-space>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </header>
</template>

<style scoped>
#login-bg {
    height: 700px;
    background-image: url("https://vilipix.oss-cn-beijing.aliyuncs.com/web/login/wallper-02.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: right;
}

.login-w-m {
    width: 320px;
    margin: 15vh auto 0 auto;
    padding: 15px;
    background-color: hsla(0, 0%, 100%, .9);
}

#login-header {
    text-align: center;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul>li:nth-child(1) {
    font-size: 50px;
    font-weight: bold;
    font-style: oblique;
    color: #0096fa;
}

ul>li:nth-child(2) {
    font-weight: bold;
    font-size: 14px;
    color: #757c80;
}

ul li>h2 {
    color: #757c80;
}

a {
    text-decoration: none;
}
</style>
